<template>
    <div class="my-rewards-layout main-layout">
        <div class="top-pics">
          <img class="logo" src="../../base/images/LOGO_home@2x.png" alt="">
          <img class="title" src="../../base/images/title@2x.png" alt="">
        </div>
        <div class="my-rewards-layout-list">
            <div class="my-rewards-layout-banner hide">我的奖品</div>
            <div @click="openCode(item.image,item.comment)" v-for="item in rewardsList" class="list xlg-font">
                <img class="logo" v-show="item.logo"  v-bind:src="item.logo"/>
                <p class="desc">{{item.name}}</p>
            </div>
        </div>
        <div class="md-font my-rewards-layout-rules hide">
            <router-link to="/activity-rules">活动规则</router-link>
        </div>
        <div class="fade-code" v-show="comment||codePath" @click="closeCode">
            <img :src="comment" v-show="comment"/>
            <img :src="codePath" v-show="codePath" alt="">
        </div>
        <div class="bottom-logos">
            <img src="../../base/images/bottom_logo@2x.png" alt="">
        </div>
    </div>
</template>
<script>
    module.exports={
        data:function(){
            return {
                rewardsList:[
                    // {name:'UME电子体验劵'},
                    // {name:'电动按摩器'},
                    // {name:'水果体验劵'}
                ],
                codePath:null,
                comment:""
            }
        },

        created:function(){
            var _this=this;

           $.post("/wx/queryGift",{"userId":  _this.$root.userId},function (data) {
            //$.post("/wx/queryGift",{"userId": "41e653f7dcfb48c4ac2e65d8a2020224"},function (data) {
                if(data.code == 200){
                    var d = data.data;
                    for(var i =0;i<d.giftList.length;i++){
                        _this.rewardsList.push({name:d.giftList[i].name,image:d.giftList[i].description,logo:d.giftList[i].logo,comment:d.giftList[i].comment});
                    }

                }
            },"json");

        },
        methods:{
          openCode: function(path,comment){
              this.codePath = path;
              this.comment = comment;
          },
          closeCode: function(){
            this.codePath = null;
              this.comment = "";
          }
        }
    }
</script>
<style lang="less">
   .my-rewards-layout{
       
       .my-rewards-layout-rules{
           margin-top: 25px;
           text-align: center;
           a{
               color:white;
           }
       }
       .my-rewards-layout-banner{
           width:70%;
           margin:0 auto;
           text-align: center;
           background-image: url("../../base/images/banner.png");
           background-repeat: no-repeat;
           background-size: 100%;
           color:#FFFD88;
           height:32px;
           box-sizing: border-box;
           padding-top:5px;
           background-position: center;
           position: relative;
           top:-15px;
       }
       .my-rewards-layout-list{
           position: relative;
           margin:0 auto 0;
           height: 70vh;
           overflow: auto;
           div.list{
               width: 88vw;
               margin:0 auto 2.2vh;
               min-height:10.5vh;
               background: #fff;
               color:#0B81D3;
               border-radius: 8px;
               font-size:15px;
               box-sizing: border-box;
               padding: 1.6vh 5.3vw 1.6vh 21.5vw;
               position: relative;

               .logo{
                  position: absolute;
                  width: 50px;
                  height: 50px;
                  left: 5.3vw;
                  top: 50%;
                  margin-top: -25px;
                  border-radius: 100%;
               }
               .name{
                font-size: 12px;
                color: #989898;
                margin: 5px 0;
               }
               .desc{
                font-size: 15px;
                color: #0B81D3;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
               }
           }
       }


   }

   .fade-code{
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    text-align: center;

    img{
      max-width: 80%;
      max-height: 80%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }

   }
</style>